<template>
    <div :class="{'menu-dis':arrNum==0}">
        <span @click="changePage('/monitor/online')" :style="{color : ($route.name=='online'?'blue':'')}">
            <el-icon class="left-nav-icon"><Top /></el-icon>
            在线用户
        </span>
        <span @click="changePage('/monitor/job')" :style="{color : ($route.name=='job'?'blue':'')}">
            <el-icon class="left-nav-icon"><Timer /></el-icon>
            定时任务
        </span>
        <span @click="changePage('/monitor/druid')" :style="{color : ($route.name=='druid'?'blue':'')}">
            <el-icon class="left-nav-icon"><TrendCharts /></el-icon>
            数据监控
        </span>
        <span @click="changePage('/monitor/server')" :style="{color : ($route.name=='server'?'blue':'')}">
            <el-icon class="left-nav-icon"><Coffee /></el-icon> 
            服务监控
        </span>
        <span @click="changePage('/monitor/cache')" :style="{color : ($route.name=='cache'?'blue':'')}">
            <el-icon class="left-nav-icon"><FolderRemove /></el-icon>
            缓存监控
        </span>
        <span @click="changePage('/monitor/cacheList')" :style="{color : ($route.name=='cacheList'?'blue':'')}">
            <el-icon class="left-nav-icon"><FolderOpened /></el-icon>
            缓存列表
        </span>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router';
const props = defineProps({
    arrNum: {
        type: Number, //用来指定当前自定义属性的数据类型
        default: 0 //用来指定当前自定义属性的默认值
    }
});
const router = useRouter();
function changePage(pageUrl) {
    router.push(pageUrl)
}
</script>

<style scoped>
.menu-dis{display: none;}
div span{display: block; color: #fff; background-color: #1f2d3d; padding: 15px; font-size: 18px; text-align: center; cursor: pointer;}
main span .left-nav-icon{vertical-align: middle; margin-right: 15px;}
div span:hover{background-color: #001528;}
</style>